<template>
  <Card
    ref="wrapper"
    :height="height"
    :style="{height: wrapperHeight}"
    v-bind="$attrs"
    v-on="$listeners">
    <!-- 所有插槽内容显示在这里 ↓ -->
    <template v-for="(slots, slotsName) in $slots">
      <template v-if="slotsName !== 'footer'">
        <render-dom v-for="(render, index) in slots"
                    :key="`d_card_${slotsName}_${index}`"
                    :render="() => render"
                    :slot="slotsName">
        </render-dom>
      </template>
    </template>
<!--    <slot name="title"></slot>-->
<!--    <slot></slot>-->
    <!-- 所有插槽内容显示在这里 ↑ -->
    <!-- 其他的插槽已经加载完了，所以这里理所当然是footer -->
    <div ref="footer" v-if="$slots.footer" class="d-card-footer">
      <slot name="footer"></slot>
    </div>
  </Card>
</template>

<script>
import RenderDom from '@/libs/render-dom'
export default {
  name: 'd-card',
  components: {
    RenderDom
  },
  props: ['height'],
  computed: {
    wrapperHeight () {
      return this.height ? (this.height + 'px') : 'auto'
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (!this.height) {
        // this.height = this.$refs.wrapper.clientHeight + this.$refs.footer.clientHeight
        console.log(this.$refs.wrapper.$el.clientHeight, this.$refs.footer.clientHeight)
      }
    })
  }
}
</script>
